<template>
  <div>
    <!-- banner区域 -->
    <div class="sup-banner tac">
      <h2 class="c-fff fw400">供应商合作</h2>
      <p class="fz22 c-fff w571">
        橙券诚邀您的加入，更高效的合作方式，更尖端的技术接入
        我们期待与您携手前行共创未来
      </p>
    </div>
    <!-- 内容区 -->
    <div class="sup-content">
      <!-- 入驻流程 -->
      <div class="sup-procedure w920 pt79">
        <h3 class="tac c-333 fz30 fw400">入驻流程</h3>
        <ul class="flex just-between pt65">
          <li class="sub-pro-item">
            <img
              src="@/assets/img/supplier/sub-fill.png"
              width="130"
              height="130"
              alt="fill in"
            />
            <p class="tac fz20 pt23">填写信息</p>
          </li>
          <li class="sub-pro-arrow"></li>
          <li class="sub-pro-item">
            <img
              src="@/assets/img/supplier/sub-fill.png"
              width="130"
              height="130"
              alt="fill in"
            />
            <p class="tac fz20 pt23">填写信息</p>
          </li>
          <li class="sub-pro-arrow"></li>
          <li class="sub-pro-item">
            <img
              src="@/assets/img/supplier/sub-fill.png"
              width="130"
              height="130"
              alt="fill in"
            />
            <p class="tac fz20 pt23">填写信息</p>
          </li>
          <li class="sub-pro-arrow"></li>
          <li class="sub-pro-item">
            <img
              src="@/assets/img/supplier/sub-fill.png"
              width="130"
              height="130"
              alt="fill in"
            />
            <p class="tac fz20 pt23">填写信息</p>
          </li>
        </ul>
      </div>
      <!-- 入驻申请 -->
      <div class="sup-apply">
        <h3 class="c-333 fz30 fw400">入驻申请</h3>
        <form class="form-apply" :module="msgForm">
          <input type="text" placeholder="您的姓名" v-model="msgForm.name" />
          <input
            type="text"
            placeholder="您的手机号码"
            v-model="msgForm.phone"
          />
          <input
            type="text"
            placeholder="您要提供的资源"
            v-model="msgForm.resource"
          />
          <input
            type="submit"
            value="提交信息"
            @click.prevent="handleSubmit(msgForm)"
          />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/supplier-enter.css";
// import { MessageBox } from "element-ui";
export default {
  name: "Application",

  data() {
    return {
      msgForm: {
        name: "",
        phone: "",
        resource: "",
      },
    };
  },

  mounted() {
    this.$EventBus.$emit("navActive", "application");
  },

  methods: {
    handleSubmit(data) {
      if (!data.name || !data.phone || !data.resource) {
        this.El_MessageBox({
          type:'info',
          title: "提示",
          message: "请填写完整信息",
          callback:()=> null
        });
        return false;
      }
      this.$api
        .subApplication(data)
        .then((res) => {
          console.log("提交成功", res);
          this.msgForm = { name: "", phone: "", resource: "" };
          this.El_Message({
            type: "success",
            message: "提交成功！",
          });
        })
        .catch((err) => {
          console.log("提交失败", err.response.data.errors);
          this.El_MessageBox({
            type: "error",
            title:'提交失败',
            message: `${err.response.data.errors}`,
            callback:()=> null
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>